<template>
  <div>
    OperateComponent
    <base-button
      v-if="config.addBtn.show"
      :btn-item-config="config.addBtn"
      :class="config.addBtn.class"
      @buttonCB="buttonCB"
    ></base-button>
    <base-button
      v-for="(btn, i) in buttonList"
      :key="i"
      :btn-item-config="btn"
      :class="btn.class"
      @buttonCB="buttonListMethodCB"
    ></base-button>
  </div>
</template>

<script>
import { assignObject, isEmptyValue } from '@/utils/tools'
import BaseButton from '../BaseSingleComponent/BaseButton.vue'
export default {
  // 页面按钮操作组件
  name: 'OperateComponent',

  components: {
    BaseButton
  },

  model: {
    prop: 'operationConfig',
    event: 'setOperationConfig'
  },

  props: {
    operationConfig: { type: Object, default: () => ({}) },
    addBtnDisabled: { type: Boolean, default: false },
    addBtnShow: { type: Boolean, default: true }
  },

  data() {
    return {
      config: this.operationConfig,
      addBtnDefault: {
        title: '新增',
        method: 'tableAdd'
      },
      btnDefault: {
        color: 'primary',
        outlined: true,
        show: true,
        disabled: false,
        class: 'ma-2'
      },
      buttonList: [],
      btnSize: 'small',
      btnSizeMap: {
        'x-small': true,
        normal: true,
        small: true,
        large: true,
        'x-large': true
      }
    }
  },

  computed: {},

  watch: {},

  created() {
    this.btnDefault[this.btnSize] = this.btnSizeMap[this.btnSize]
    this.addBtnDefault = assignObject(this.addBtnDefault, this.btnDefault)
    this.setDefaultConfig()
  },

  mounted() {},

  methods: {
    setDefaultConfig() {
      // const config = this.config
      // this.config
      if (isEmptyValue(this.config)) {
        // 1. 没有配置 operationConfig 空
        this.config.addBtn = this.addBtnDefault
      } else {
        // 2. 配置了某些属性
        const addBtn = 'addBtn' in this.operationConfig ? this.operationConfig.addBtn : {}

        this.setAddBtnShow(this.config.addBtnShow, addBtn)

        // this.setAddBtnDisabled(this.config.addBtnDisabled, addBtn, this.config)
        this.setAddBtnDisabled()

        this.setAddBtnClass(this.addBtnDefault.class, this.config.addBtnClass, addBtn)

        this.config.addBtn = assignObject(this.addBtnDefault, addBtn)
        delete this.config.addBtnClass

        console.log(addBtn, this.config)
      }
      this.$emit('setOperationConfig', this.config)
    },

    setAddBtnShow(outShow, addBtn) {
      // 1. empty -> true; 2. outShow value
      outShow = isEmptyValue(outShow) ? true : outShow
      // 1. empty -> true; 2. addBtn.show value
      const inShow = isEmptyValue(addBtn.show) ? true : addBtn.show

      !(outShow && inShow) && (addBtn.show = false)
      // result
      // addBtn.show = outShow && inShow
    },

    // setAddBtnDisabled(outDisabled, addBtn) {
    setAddBtnDisabled() {
      const addBtn = 'addBtn' in this.operationConfig ? this.operationConfig.addBtn : {}
      const outDisabled = this.config.addBtnDisabled
      console.log('setAddBtnDisabled1', addBtn, outDisabled)
      if (!isEmptyValue(outDisabled)) {
        this.$set(addBtn, 'disabled', outDisabled)
        addBtn.disabled = outDisabled
        this.$set(this.operationConfig.addBtn, 'disabled', outDisabled)
      }
      console.log('setAddBtnDisabled2', addBtn, outDisabled)
      /** */
      // const inDisabled = addBtn.disabled
      // console.log(outDisabled, addBtn, !isEmptyValue(outDisabled))
      // if (!isEmptyValue(outDisabled)) {
      //   this.$set(addBtn, 'disabled', outDisabled)
      //   addBtn.disabled = outDisabled
      // }
      // console.log('change', addBtn, addBtn.disabled)
      /** */
      // 1. defined operationConfig.addBtnDisabled or operationConfig.addBtn.disabled
      // if (!isEmptyValue(outDisabled) || !isEmptyValue(addBtn.disabled)) {
      //   // outDisabled or inDisabled 一个为 true 则禁用
      //   ;(outDisabled || inDisabled) && (addBtn.disabled = true)
      // }
    },

    setAddBtnClass(defaultClass, outClass, addBtn) {
      // 外部定义的样式
      outClass = isEmptyValue(outClass) ? '' : outClass
      // 内部定义的样式
      const inClass = isEmptyValue(addBtn.class) ? '' : addBtn.class
      // 拼接所有样式
      addBtn.class = defaultClass + ' ' + outClass + ' ' + inClass
    },

    // 按钮方法的执行
    buttonCB(methodName, el) {
      this[methodName](el)
    },

    tableAdd() {
      this.$emit('tableAdd')
    },

    buttonListMethodCB(methodName, el) {}
  }
}
</script>

<style lang="scss" scoped></style>
